<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
	<link rel="stylesheet" href="./index.css">
</head>
<body>
	<div class="wrap">
		<div class="some">
			<div class="btn-audio">
				<span class="btn-music glyphicon glyphicon-music btn-ani"></span>
				<audio id="music" autoplay="autoplay" loop="loop">
				  <source src="images/music.mp3" type="audio/mpeg" />
				</audio>
			</div>
			<ul>
				<li class="complaints"><a href="javascript:;"><p>用户</p><p>投诉</p></a></li>
				<li class="play"><a href=""><p>活动</p><p>玩法</p></a></li>
				<li class="phone"><a href="tel:10086"><p>联系</p><p>学校</p></a></li>
				<li class="share"><a href=""><p>分享</p><p>活动</p></a></li>
			</ul>
		</div>
		<div class="screen">
			<img class="screen-im img-responsive" src="images/00.jpg" alt="">	
		</div>
		<div class="number">
			<p>招生人数：&nbsp;85人&nbsp;&nbsp;访问人次：&nbsp;841人</p>
			<div class="line"></div>
			<p>活动倒计时：&nbsp;<span>7天10时36分</span></p>
		</div>
		<div class="commander">
			<div class="head-pic">
				<div class="pic">
					<span>团长</span>
					<img src="images/00.jpg" alt="">
				</div>
				<p>马伟涛马伟涛</p>
			</div>
			<div class="title">
				<p>	
					马伟涛邀请你参与洋洋舞蹈学校满5人享受价值1488元3个月课程
				</p>
			</div>
		</div>
		<div class="member">
			<div class="container">
				<h5>马伟涛1号团成员:</h5>
				<div class="row">
					<div class="col-xs-2">
						<img src="images/00.jpg" alt="">
						<p>马马马马马马</p>
					</div>
					<div class="col-xs-2">
						<img src="images/00.jpg" alt="">
						<p>刘刘刘马马马</p>
					</div>
					<div class="col-xs-2">
						<img src="images/00.jpg" alt="">
						<p>王王王马马马</p>
					</div>
					<div class="col-xs-5">
						<div class="add">
							<span>+</span>
						</div>
						<p>与他拼团</p>
					</div>
				</div>
			</div>
		</div>
		<div class="team">
			<div class="team-title">
				<h4>附近的团</h4>
			</div>
			<div class="team-con more-team">
  				<table>
					<tr>
						<th></th>
						<th>团长</th>
						<th>组团进度</th>
						<th>手机号</th>
						<th class="in">参加活动</th>
					</tr>
					<tr>
						<td>1</td>
						<td class="name">马伟涛</td>
						<td class="schedule">
							<progress value="5" max="8"></progress>
							参团进度：X/X
						</td>
						<td class="phone">**86</td>
						<td class="in">立即参团</td>
					</tr>
					<tr>
						<td>2</td>
						<td class="name">马伟涛</td>
						<td class="schedule">
							<progress value="4" max="8"></progress>
							参团进度：X/X
						</td>
						<td class="phone">**86</td>
						<td class="in">立即参团</td>
					</tr>
					<tr>
						<td>3</td>
						<td class="name">马伟涛</td>
						<td class="schedule">
							<progress value="4" max="8"></progress>
							参团进度：X/X
						</td>
						<td class="phone">**86</td>
						<td class="in">立即参团</td>
					</tr>
					<t class="bl">
						<td>4</td>
						<td class="name">马伟涛</td>
						<td class="schedule">
							<progress value="4" max="8"></progress>
							参团进度：X/X
						</td>
						<td class="phone">**86</td>
						<td class="in">立即参团</td>
					</tr>
					<tr>
						<td>5</td>
						<td class="name">马伟涛</td>
						<td class="schedule">
							<progress value="4" max="8"></progress>
							参团进度：X/X
						</td>
						<td class="phone">**86</td>
						<td class="in">立即参团</td>
					</tr>
					<tr>
						<td>6</td>
						<td class="name">马伟涛</td>
						<td class="schedule">
							<progress value="4" max="8"></progress>
							参团进度：X/X
						</td>
						<td class="phone">**86</td>
						<td class="in">立即参团</td>
					</tr>
					<tr>
						<td>7</td>
						<td class="name">马伟涛</td>
						<td class="schedule">
							<progress value="4" max="8"></progress>
							参团进度：X/X
						</td>
						<td class="phone">**86</td>
						<td class="in">立即参团</td>
					</tr>
				</table>
			</div>		
			<div class="more">
				<p class="more-text">
					点击查看全部
					<span class="glyphicon glyphicon-chevron-down"></span>
				</p>
			</div>
		</div>
		<div class="list">
			<table>
				<tr>
					<th class="people" width="45%">团购人数</th>
					<th class="rule">|</th>
					<th width="45%">团购价格（单价）</th>
				</tr>
				<tr>
					<td class="people">4人团</td>
					<td>|</td>
					<td>￥899元</td>
				</tr>
				<tr>
					<td class="people">6人团</td>
					<td>|</td>
					<td>￥499元</td>
				</tr>
				<tr>
					<td class="people">8人团</td>
					<td>|</td>
					<td>￥299元</td>
				</tr>
				<tr>
					<td class="people">10人团</td>
					<td>|</td>
					<td>￥100元</td>
				</tr>
			</table>
		</div>
		<div class="detail">
			<div class="team-title">
				<h4>活动详情</h4>		
			</div>
			<div class="content">活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详情活动详动</div>
		</div>
	</div>
	<div class="foot">
		<div class="foot-btn">
			<button class="btn">我要开团</button>
			<button class="btn">立即参团</button>
		</div>
	</div>
	<script src="./js/jquery-1.12.4.js"></script>
	<script>
		$(function(){
			var audio=document.getElementById('music');	
			$('.btn-music').click(function(){
				if(audio.paused){
					$('.btn-music').addClass('btn-ani');
                    audio.play();
                    return;
                }else{
                	$('.btn-music').removeClass('btn-ani');
                    audio.pause(); 
                }
			});
			$('.more').click(function(){
				$('.more-team').removeClass('more-team');
				$('.more').hide();
				$('.list').css('margin-top','10px');
			});
		});
	</script>
</body>
</html>